<template>
  <div class="type-select-container">
    <div class="type-options">
      <el-card
        v-for="type in documentTypes"
        :key="type.id"
        :body-style="{ padding: '0px' }"
        class="type-card"
        @click.native="handleSelect(type)"
      >
        <div slot="header" class="card-header">
          <span>{{ type.name }}</span>
        </div>
        <div class="card-content">
          <font-awesome-icon
            :icon="getFontAwesomeIcon(type.fileType)"
            class="type-icon"
            :style="{ color: getIconColor(type.fileType) }"
          />
          <!-- <i :class="type.icon" class="type-icon"></i> -->
          <p>{{ type.description }}</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  faFileWord,
  faFileExcel,
  faFilePowerpoint,
} from "@fortawesome/free-solid-svg-icons";
export default {
  name: "TemplateTypeSelect",
  data() {
    return {
      documentTypes: [
        {
          id: "word",
          name: "文本文档",
          fileType: "docx",
          documentType: "text",
          description: "创建Word格式模板",
        },
        {
          id: "excel",
          name: "电子表格",
          fileType: "xlsx",
          documentType: "spreadsheet",
          description: "创建Excel格式模板",
        },
        {
          id: "powerpoint",
          name: "演示文稿",
          fileType: "pptx",
          documentType: "presentation",
          description: "创建PPT格式模板",
        },
      ],
    };
  },
  methods: {
    // 获取对应的 Font Awesome 图标
    getFontAwesomeIcon(fileType) {
      switch (fileType) {
        case "docx":
          return faFileWord;
        case "xlsx":
          return faFileExcel;
        case "pptx":
          return faFilePowerpoint;
        default:
          return faFileWord; // 默认使用 Word 图标
      }
    },

    // 根据文件类型获取图标颜色
    getIconColor(fileType) {
      switch (fileType) {
        case "docx":
          return "#2c82e0"; // Word 蓝色
        case "xlsx":
          return "#36b37e"; // Excel 绿色
        case "pptx":
          return "#ff5630"; // PowerPoint 橙色
        default:
          return "#409eff"; // 默认颜色
      }
    },

    handleSelect(type) {
      console.log("子组件：触发selectType事件", type);
      // 强制触发事件，确保$emit正常
      this.$emit("selectType", type);
    },
  },
};
</script>

<style scoped>
.type-select-container {
  width: 100%;
  height: 100%;
  padding: 20px; /* 避免边缘被父组件裁剪 */
  z-index: 10; /* 确保在顶层 */
}

.type-options {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 50px;
}

.type-card {
  width: 250px;
  cursor: pointer;
  transition: all 0.3s;
  overflow: visible;
  position: relative; /* 确保事件冒泡正常 */
}
/* 确保卡片内部元素不阻止事件 */
.card-header,
.card-content {
  pointer-events: auto; /* 允许内部元素传递点击事件 */
  padding: 15px; /* 适当增加内边距，扩大可点击区域 */
}

.type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-header {
  background: #f5f7fa;
  padding: 15px;
}

.card-content {
  text-align: center;
  padding: 30px 20px;
}

.type-icon {
  font-size: 50px;
  color: #409eff;
  margin-bottom: 20px;
}
</style>
